<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <div style="border: 1px solid red; height: 100px">
      {{ title + "-----" + age }}
      <!-- <div>
        children's Data: {{ $children[0].content }} --
        {{ $children[0].count }} --
        {{ $children[0].sum }}
      </div> -->
      <div>{{ content }}</div>
    </div>
    <HelloWorld msg="Welcome to Your Vue.js App" a="1" b="2" c="3" />
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  // provide: {
  //   // Vue的选项之一
  //   list: [1, 2, 3],
  // },
  // 写成provide函数时，可以实现一个响应式效果
  provide() {
    return {
      list: this.arr,
      tableData: [],
    };
  },
  name: "HomeView",
  data() {
    return {
      arr: [1, 2, 3],
      title: "home view",
      age: 123,
      content: "",
    };
  },
  components: {
    HelloWorld,
  },
  created() {
    // console.log("2...父组件被created");
    // console.log(this.$children);
  },
  mounted() {
    // console.log("2...父组件被挂载");
    // console.log(this.$children[0]);
    // console.log(this.$children[0].content);
    // console.log(this.$children[0].count);
    // console.log(this.$children[0].sum);
    this.$children[0].content = "同志们好";
    this.content = this.$children[0].content;
    console.log(this.$children[0].$options.name); // 可以使用这个属性来判断子组件时哪一个。
    console.log(this.$children[0].$options.myname);
  },
};
</script>
